<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新首页</title>
    <base th:href="@{/}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/index/home.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/index/home-system_briefing.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/index/hover-box.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/index/text-effect/normalize.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/index/text-effect/demo.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/index/text-effect/linkstyles.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/index/text-effect/default.css}"/>
    <style>


    </style>
    <style id="css"></style>
</head>
<body>
<div id="container" style="background-color: #FFF;">
    <!--用户信息-->
    <div class="user_pocket">
        <span class="pocket_item my_diary">
            <span class="item_bg"></span>
            <span class="item_name">
                <span class="name_value">80</span>
                <span class="name_title">我的日记</span>
            </span>
        </span>
        <span class="pocket_item my_treasure">
            <span class="item_bg"></span>
            <span class="item_name">
                <span class="name_value">80</span>
                <span class="name_title">我的宝箱</span>
            </span>
        </span>
        <span class="pocket_item item_lo">
            <span class="item_bg"></span>
            <span class="item_name">
                <span class="name_value">80</span>
                <span class="name_title">其他</span>
            </span>
        </span>
        <span class="pocket_item item_ho">
            <span class="item_bg"></span>
            <span class="item_name">
                <span class="name_value">80</span>
                <span class="name_title">其他</span>
            </span>
        </span>
    </div>
    <!--系统简报-->
    <div class="system_briefing">
        <span class="system_nav">假装</span>
        <span class="system_nav">假装</span>
        <span class="system_nav">假装</span>
        <span class="system_nav">假装</span>
        <div id="nav_ul_li">
            <ul class="nav_ul">
                <li class="nav_li c-btn c-btn-border-line">许东强</li>
                <li class="nav_li c-btn c-btn-border-line">许东强</li>
                <li class="nav_li c-btn c-btn-border-line">许东强</li>
                <li class="nav_li c-btn c-btn-border-line">许东强</li>
                <li class="nav_li c-btn c-btn-border-line">许东强</li>
                <li class="nav_li c-btn c-btn-border-line">许东强</li>
                <li class="nav_li c-btn c-btn-border-line">许东强</li>
                <li class="nav_li c-btn c-btn-border-line">许东强</li>
                <li class="nav_li c-btn c-btn-border-line">许东强</li>
                <li class="nav_li c-btn c-btn-border-line">许东强</li>
                <li class="nav_li c-btn c-btn-border-line">许东强</li>
            </ul>
            <ul class="nav_ul">
                <li class="nav_li c-btn c-btn-border-line">许西强</li>
            </ul>
            <ul class="nav_ul">
                <li class="nav_li c-btn c-btn-border-line">许南强</li>
            </ul>
            <ul class="nav_ul">
                <li class="nav_li c-btn c-btn-border-line">许北强</li>
            </ul>
        </div>
    </div>
    <!--系统简报-->
    <div class="system_info">
        <div class="info_left">
            <div class="left_content info_left_top">
                <span class="content_title">系统特色</span>
                <div class="box">
                    <ul class="picList" id="pic">

                    </ul>
                </div>
            </div>
            <div class="left_content info_left_bottom">
                <span id="clock"></span>
                <span class="box-shiny gift">
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <div class='box lottery'></div>
                </span>
                <span class="box-shiny info_1">
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <div class='box'></div>
                </span>
                <span class="box-shiny info_2">
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <div class='box'></div>
                </span>
            </div>
        </div>
        <div class="info_right">
            <div id="box-clock">
                <div class="grid__item color-11">
                    <a class="link link--yaku" href="javascript:void(0);">
                        <span>Y</span><span>u</span><span>a</span><span>n</span>
                    </a>
                </div>
            </div>
            <div id="box-info">
                <span class="content_title">个人信息</span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/bootstrap/js/jquery.js}"></script>
<script>
    $(document).ready(function () {
        $(".system_briefing .system_nav").mouseover(function () {
            $(this).css({'color': '#1769ff', 'border-bottom': '2px solid #367dff'})
                .siblings().css({'color': '#69696d', 'border-bottom': 'none'});
            $("#nav_ul_li").css('display', 'block')
                .find(".nav_ul").eq($(this).index()).fadeIn().siblings().hide();
            $('.system_info').eq(0).addClass('mh');
        });

        $("#nav_ul_li").mouseleave(function () {
            $(this).css('display', 'none');
            $('.system_info').eq(0).removeClass('mh');
            $(".system_briefing .system_nav").css({'color': '#69696d', 'border-bottom': 'none'});
        });
    });
</script>
<script type="text/javascript" th:src="@{/bootstrap/js/index/lib/circle_JT_min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/index/home-system_briefing.js}"></script>
<script>
    $.circleJt({
        domId: 'clock',//必须
        radius: 85,//必须
        pbColor: '#FFF',//必需
        pbWidth: 10,//非必需
        value: 0,//必须
        totalValue: 1000,//非必需
        percentage: true,//非必需
        fontSize: 30,
        clock: true,//如果clock为真的时候，上述属性除value,totalValue,percentage均全都无效
        digitalWatch: true//以电子表形式显示
    });
</script>
</body>
</html>